<script setup lang="ts">
import type { TabsProps } from '@/types';

import type { PropType } from 'vue';

import { Icon } from '@/components/core/icon';

import { ElButton, ElTooltip } from 'element-plus';

defineOptions({
  name: 'Toolbar',
});
const { tabPane } = defineProps({
  tabPane: {
    default: () => {},
    type: Object as PropType<TabsProps>,
  },
});
const emits = defineEmits(['onCommand']);
const onCommand = (command: string) => {
  emits('onCommand', command);
};
</script>
<template>
  <div class="wos-notepad__toolbar">
    <div class="wos-notepad__toolbar-left">
      <div class="item" title="打开文件" @click="onCommand('openFile')">
        打开文件...
      </div>
      <div class="item" title="新建文件" @click="onCommand('newFile')">
        新建文件
      </div>
      <div class="item" title="另存为..." @click="onCommand('saveAs')">
        另存为...
      </div>
      <div class="item" title="编辑器设置" @click="onCommand('setting')">
        设置...
      </div>
    </div>
    <div class="wos-notepad__toolbar-right">
      <ElTooltip
        v-if="tabPane && !tabPane?.path"
        content="当前文件未保存，请及时保存以防数据丢失。"
        placement="left"
      >
        <Icon icon="ep:question-filled" />
      </ElTooltip>

      <ElButton
        :disabled="!tabPane?.name"
        size="small"
        @click="onCommand('saveFile')"
      >
        保存
      </ElButton>
    </div>
  </div>
</template>
